<template>
  <div class="ibox">
    <!-- input 表单 -->
    <el-form ref="getWorkOrderParams" :model="getWorkOrderParams" label-width="70px">
      <div class="form-flex">
        <div class="list">
          <el-form-item label="提交时间">
            <el-date-picker v-model="submissionTime" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss"
              start-placeholder="开始日期" end-placeholder="结束日期" style="width:380px" />
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="公司" prop="groupId" label-width="45px">
            <el-select v-model="getWorkOrderParams.groupId" placeholder="请选择公司" style="width: 100%;" clearable>
              <el-option v-for="(item,index) in listGroupInfo" :label="item.name" :value="item.id">{{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="发起人" prop="createUserName">
            <el-select v-model="getWorkOrderParams.createUserName" placeholder="请选择发起人" style="width: 100%;" clearable>
              <el-option v-for="(item,index) in orderCreatedUserInfo" :label="item.userName" :value="item.userName" />
            </el-select>
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="处理人" prop="dealWithUserName" label-width="60px">
            <el-select v-model="getWorkOrderParams.dealWithUserName" placeholder="请选择处理人" style="width: 100%;"
              clearable>
              <el-option v-for="(item,index) in orderListUserInfo" :label="item.userName" :value="item.userName" />
            </el-select>
          </el-form-item>
        </div>
      </div>

      <div class="form-flex">
        <div class="list">
          <el-form-item label="网点所属" prop="pointId">
            <el-cascader v-model="getWorkOrderParams.pointId" :props="addressProps" style="width: 380px;"
              placeholder="请选择网点所属" clearable />
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="状态" prop="status" label-width="45px">
            <el-select v-model="getWorkOrderParams.status" placeholder="请选择状态" style="width: 100%;" clearable>
              <el-option label="待处理" value="1" />
              <el-option label="待验收" value="2" />
              <el-option label="已验收" value="3" />
            </el-select>
          </el-form-item>
        </div>
        <div class="list">
          <el-form-item label="逾期状态" prop="overdueStatus">
            <el-select v-model="getWorkOrderParams.overdueStatus" placeholder="请选择逾期状态" style="width: 100%;" clearable>
              <el-option label="未逾期" value="1" />
              <el-option label="已逾期" value="2" />
            </el-select>
          </el-form-item>
        </div>
        <div class="list" style="display: flex;">
          <el-form-item label="优先级" style="flex: 1;" prop="priority" label-width="60px">
            <el-select v-model="getWorkOrderParams.priority" placeholder="请选择优先级" clearable>
              <el-option label="高" value="1" />
              <el-option label="中" value="2" />
              <el-option label="低" value="3" />
            </el-select>
          </el-form-item>
          <div style="margin-left: 10px;width: 150px;">
            <el-button type="primary" size="medium" @click="search()">搜索</el-button>
            <el-button size="medium" @click="resetForm('getWorkOrderParams')">重置</el-button>
          </div>
        </div>
      </div>
    </el-form>

    <!-- 工单选项 -->
    <div class="flex-box">
      <div class="work-order">
        <div class="item" :class="[myWorkOrder=='all'?'on':'']" @click="myWorkOrderChange('all')">全部工单</div>
        <div class="item" :class="[myWorkOrder=='commit'?'on':'']" @click="myWorkOrderChange('commit')">我发起的</div>
        <div class="item" :class="[myWorkOrder=='deal'?'on':'']" @click="myWorkOrderChange('deal')">待我整改</div>
        <div class="item" :class="[myWorkOrder=='accept'?'on':'']" @click="myWorkOrderChange('accept')">待我验收</div>
        <div class="item" :class="[myWorkOrder=='copy'?'on':'']" style="border-right: none;"
          @click="myWorkOrderChange('copy')">抄送我</div>
      </div>
    </div>
    <!-- table -->
    <el-table v-loading="listWorkOrderLoading" :data="listWorkOrder" border style="width: 100%;margin-bottom: 22px;"
      :header-cell-style="{color:'#414141'}">
      <el-table-column label="工单图片" width="180" align="center">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.pictures" v-if="index>-1" :key="index">
            <img :src="item.pictureUrl">
          </div>
          <!-- <img :src="scope.row.pictures[0]? scope.row.pictures[0].pictureUrl : '' " alt=""> -->
        </template>

      </el-table-column>
      <el-table-column prop="pointName" label="网点" width="180" align="center" />
      <el-table-column prop="createUserName" label="发起人" align="center" />
      <el-table-column prop="createTime" width="180" sortable label="提交时间" align="center">
        <template slot-scope="scope">{{ scope.row.createTime | getMyDate }}</template>
      </el-table-column>
      <el-table-column label="工单类型" align="center" width="200px">
        <template slot-scope="scope">
          <div>{{ scope.row.patrolChecks[0] && scope.row.patrolChecks[0].ciName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="priority" label="优先级" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.priority == 1">高</span>
          <span v-if="scope.row.priority == 2">中</span>
          <span v-if="scope.row.priority == 3">低</span>
        </template>
      </el-table-column>
      <el-table-column prop="dealWithUserName" label="处理人" align="center" />
      <el-table-column prop="overdueStatus" label="是否逾期" align="center">
        <template slot-scope="scope">{{ scope.row.overdueStatus == '1' ? '未逾期' : '已逾期' }}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">待处理</span>
          <span v-if="scope.row.status == 2">待验收</span>
          <span v-if="scope.row.status == 3">已验收</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div class="button">
            <el-button v-if="scope.row.status == '1'" type="danger" size="mini" round
              @click="seeWorkorderInfo(scope.row.id)">去处理</el-button>
            <el-button v-else type="primary" size="mini" round @click="seeWorkorderInfo(scope.row.id)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-box">
      <el-pagination style="margin-left: auto;" :current-page.sync="currentPage" :page-size="pageSize"
        layout="prev, pager, next, jumper" :total="pageTotal" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
  import {
    workOrderlist,
    groupInfoList
  } from '@/api/workorder'
  import {
    getProvinces,
    getCity,
    getArea,
    getStreet
  } from '@/api/address'
  import {
    orderCreatedUser,
    orderListUser
  } from '@/api/permission'
  import {
    getMyDate
  } from '@/utils/getMyDate'

  export default {
    name: '',
    components: {},
    filters: {
      // 修改时间格式
      getMyDate(time) {
        return getMyDate(time)
      }
    },
    data() {
      // const name
      return {
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
        currentPage: 1,
        listWorkOrderLoading: true,
        submissionTime: [], // 提交时间
        listGroupInfo: [], // 公司选择列表
        orderCreatedUserInfo: [], // 提交人列表
        orderListUserInfo: [], // 处理人列表
        listWorkOrder: [], // 工单列表
        myWorkOrder: 'all', // 关于我的工单查询
        level: '1', // 查询网点所属所需参数
        userAddressInfo: [], // 网点所属
        addressProps: {
          lazy: true,
          emitPath: false,
          lazyLoad(node, resolve) {
            const {
              level
            } = node
            setTimeout(() => {
              if (node.level == 0) {
                getProvinces().then(res => {
                  const provinces = res.data.map((value, i) => ({
                    value: value.provinceCode,
                    label: value.provinceName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(provinces)
                })
              }
              if (node.level == 1) {
                const params = {
                  provinceCode: node.value
                }
                getCity(params).then(res => {
                  const cities = res.data.map((value, i) => ({
                    value: value.cityCode,
                    label: value.cityName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(cities)
                })
              } else if (node.level == 2) {
                const params = {
                  cityCode: node.value
                }
                getArea(params).then(res => {
                  const area = res.data.map((value, i) => ({
                    value: value.areaCode,
                    label: value.areaName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(area)
                })
              } else if (node.level == 3) {
                const params = {
                  areaCode: node.value
                }
                getStreet(params).then(res => {
                  const street = res.data.map((value, i) => ({
                    value: value.streetCode,
                    label: value.streetName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(street)
                })
              }
            })
          }
        },
        getWorkOrderParams: {
          pageNo: 1,
          pageSize: 10,
          createTimeFrom: '', // 提交时间的开始时间
          createTimeTo: '', // 提交时间的结束时间
          groupId: '', // 公司id
          createUserName: '', // 发起人
          dealWithUserName: '', // 处理人
          acceptUserName: '', // 审批人
          copyUserName: '', // 抄送人
          pointId: '', // 网点id
          status: '', // 状态: 1待处理 2待验收 3已验收
          overdueStatus: '', // 逾期状态: 1未逾期 2已逾期
          priority: '', // 优先级: 1高 2中 3低
          searchBy: '' // 查询我的工单，commit：我提交的，deal:我处理的， accept:我审批的， copy：抄送我的；不传查所有
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getGroupInfoList() // 获取公司列表
      this.getOrderCreatedUser() // 获取提交人列表
      this.getOrderListUser() // 获取处理人列表
      this.getWorkOrderlist() // 获取工单列表
    },
    mounted() {},
    methods: {
      onSubmit() {
        console.log('submit!')
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
        this.getWorkOrderParams.pageNo = val

        this.listWorkOrderLoading = true
        this.getWorkOrderlist()
      },
      seeWorkorderInfo(id) {
        this.$router.push({
          path: 'workorderInfo',
          query: {
            id: id
          }
        })
      },
      // 获取公司列表
      getGroupInfoList() {
        groupInfoList().then(res => {
          console.log(res)
          this.listGroupInfo = res.data
        })
      },
      // 获取提交人列表
      getOrderCreatedUser() {
        orderCreatedUser().then(res => {
          this.orderCreatedUserInfo = res.data
        })
      },
      // 获取处理人列表
      getOrderListUser() {
        orderListUser().then(res => {
          console.log(res)
          this.orderListUserInfo = res.data
        })
      },
      // 获取工单列表
      getWorkOrderlist() {
        workOrderlist(this.getWorkOrderParams).then(res => {
          console.log(res)
          this.listWorkOrder = res.list
          this.pageNo = res.pageNo
          this.pageTotal = res.total
          this.listWorkOrderLoading = false
        })
      },
      // 搜索
      search() {
        this.listWorkOrderLoading = true
        if (this.submissionTime.length === 2) {
          this.getWorkOrderParams.createTimeFrom = this.submissionTime[0]
          this.getWorkOrderParams.createTimeTo = this.submissionTime[1]
        }
        console.log(this.getWorkOrderParams)
        this.getWorkOrderlist()
      },
      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      // 关于我的工单选择
      myWorkOrderChange(val) {
        this.myWorkOrder = val
        this.listWorkOrderLoading = true
        if (val == 'all') {
          this.getWorkOrderParams.searchBy = ''
        } else {
          this.getWorkOrderParams.searchBy = val
        }
        this.getWorkOrderlist()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .ibox {
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 4px rgba(55, 55, 55, .2);
    margin-bottom: 40px;
  }

  .form-flex {
    display: flex;
  }

  .form-flex .list {
    flex: 1;
    padding: 0 16px 0 0;
  }

  .form-flex .list:nth-child(4) {
    padding: 0;
  }

  .flex-box {
    display: flex;
  }

  /*工单选项*/
  .work-order {
    border: 2px solid #00805a;
    display: flex;
    border-radius: 5px;
    margin-bottom: 22px;

    .item {
      padding: 6px 18px;
      font-size: 14px;
      color: #00805a;
      border-right: 2px solid #00805A;
      cursor: pointer;
    }

    .on {
      color: #FFFFFF;
      background-color: #00805a;
    }
  }
</style>
